<template>
	<!--流水窗口 -->
	<!-- <view class="item-info" :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"> -->
	<ayjDialog ref="dialogRef" :title="title" :width="'30%'">
		<view class="cate-content">
			<!-- <view class="item-fixed-top">
				<view class="title">{{title}}</view>
				<view class="close" @click="close">
					<image src="../../static/images/close.png" mode="scaleToFill"></image>
				</view>
			</view> -->

			<!-- 客户标签 -->
			<view class="flow-c">
				<view class="cate-list comm-list">
					<view class="r-flow-box" v-for="(items, idx) in list" :key="idx" @mouseover="onMouseOver(items)"
						@mouseout="onMouseOut(items)">
						<view class="r-f-time" @click="itemClicks(items)" :class="objType == 1 ? '' : 'r-f-time-w'">
							{{ items.title }}</view>
						<view class="s-a-box">
							<text class="icon-font sele-icon" v-show="items.checked">&#xe636;</text>
							<text class="del-txt" v-show="objType == 1 && items.showBtn"
								@click="del(items)">{{ deletxt }}</text>
							<text class="edit-txt" v-show="objType == 1 && items.showBtn"
								@click="edit(items)">{{ editTxt }}</text>
						</view>
					</view>
				</view>
				<view class="btn" @click="submit">确 定</view>
			</view>
		</view>
	</ayjDialog>
	<!-- </view> -->
</template>

<script>
import lang from "../../js/conf/Lang.js";
import https from "../../js/https/Https.js";
export default {
	data() {
		return {

			dateTxt: lang.dateTxt,
			saleMoneyTxt: lang.saleMoneyTxt,

			receTxt: lang.receTxt,

			openShow: 0,

			title: "",
			objType: 1,//1:客户标签，2：云店列表
			list: [],

			editTxt: lang.editTxt,
			deletxt: lang.deleTitTxt,
		};
	},
	methods: {
		/**流水记录***/
		show(type, data) {
			// let timer = type === 'show' ? 10 : 200;
			// let state = type === 'show' ? 1 : 0;
			// this.openShow = 2;
			// setTimeout(() => {
			// 	this.openShow = state;
			// }, timer);
			if (!type) return;
			this.$refs.dialogRef.open();
			this.list = [];
			this.objType = data.type;
			this.title = data.title;
			this.list = data.list;
		},

		/***选中/取消****/
		itemClicks(items) {
			items.checked = !items.checked;
			this.$forceUpdate();
		},

		/*******更新未付款*****/
		submit() {
			let arr = [];
			let len = this.list.length;
			for (let i = 0; i < len; i++) {
				let o = this.list[i];
				if (o.checked) {
					arr.push(o);
				}
			}
			if (this.objType == 1)
				this.$emit("selectTag", arr);
			else
				this.$emit("selectYd", arr);
			// this.close();
			this.$refs.dialogRef.close();
		},

		/*****关闭****/
		close() {
			this.show();
		},

		onMouseOver(item) {
			if (this.objType == 1) {
				item.showBtn = true;
				this.$forceUpdate();
			}
		},

		onMouseOut(item) {
			if (this.objType == 1) {
				item.showBtn = false;
				this.$forceUpdate();
			}
		},

		/****删除标签*****/
		del(item) {
			let that = this;
			let data = {};
			data.title = this.deletxt;
			data.content = lang.customerTxt.delTipTxt;
			data.showCancel = true;
			lang.showWin(data, back)
			function back(res) {
				if (res.confirm) {
					let param = {};
					param.id = item.id;
					https.customTagDel(param, callBack);
				}
			}

			function callBack(obj) {
				if (!obj) return;
				if (obj.status == 1) {
					delList();
				}
			}

			function delList() {
				let len = that.list.length;
				for (let i = 0; i < len; i++) {
					let obj = that.list[i];
					if (obj.id == item.id) {
						that.list.splice(i, 1);
					}
				}
			}
		},

		/****编辑标签***/
		edit(item) {
			this.$emit("editTag", item);
		},

		/***编辑保存成功刷新列表*****/
		setListData(datalist) {
			// if (this.openShow != 1) return;
			// this.list = [];
			// this.list = list;
			// this.$forceUpdate();
			
			// 遍历 this.list 和 datalist，比较相同 ID 的标题
			this.list.forEach(item => {
				const matchingItem = datalist.find(d => d.id === item.id);
				if (matchingItem && matchingItem.title !== item.title) {
					item.title = matchingItem.title;
				}
			});
			this.$forceUpdate();
		},
	},
}
</script>
<style lang="scss">
.flow-c {
	.cate-list {
		height: 500px;

		.r-flow-box {
			width: 100%;
			cursor: pointer;
			font-size: 14px;
			color: #666;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding-top: 4px;
			padding-bottom: 4px;
			position: relative;

			.r-f-time {
				line-height: 30px;
				width: 360px;
				padding-left: 10px;
				padding-right: 30px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.r-f-time-w {
				width: 420px;
			}

			.s-a-box {
				position: absolute;
				right: 10px;
				display: flex;
				align-items: center;

				.sele-icon {
					color: #3388ff;
					font-size: 30px;
				}

				.del-txt {
					color: #fff;
					background-color: #F04848;
					padding: 5px;
					border-radius: 5px;
				}

				.del-txt:hover {
					background-color: #e24343;
				}

				.edit-txt {
					margin-left: 5px;
					padding: 5px;
					color: #fff;
					background-color: #3388ff;
					border-radius: 5px;
				}

				.edit-txt:hover {
					background-color: #2d79e3;
				}
			}

		}
	}

	.btn {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #3388FF;
		color: #FFF;
		font-size: 16px;
		z-index: 999;
		cursor: pointer;
	}

	.btn:hover {
		background: #2d79e3;
	}
}
</style>